<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:javascript="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>





<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
           图书分类: <select id="selectname" name="selectname" th:onchange="sendname()" >
            <option th:id="backecho" >全部</option>
            <option th:each="cate:${categoryList}"th:text="${cate.getName()}"

                    th:value="${cate.getName()}"></option>

            </select>
            <input  onclick="gointo()" type="button" value="查询">

            <input value="新增电子图书" type="button" onclick="addbook()">

            <h3 class="text-center">
                电子图书列表
            </h3>
            <input type="button" th:id="errInfo">
            <table class="table" border="2px">
                <thead>
                <tr>
                    <th>
                        图书编号
                    </th>
                    <th>
                        图书名称
                    </th>
                    <th>
                        图书摘要
                    </th>
                    <th>
                        上传人
                    </th>
                    <th>
                        上传时间
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>
                <!--表格的循环-->

                <tr th:each="list:${pageInfo.list}">
                    <td th:text="${list.id}"></td>
                    <td th:text="${list.title}"></td>
                    <td th:text="${list.summary}"></td>
                    <td th:text="${list.uploaduser}"></td>
                    <td th:text="${#dates.format(list.created,'yyyy-MM-dd')}"></td>
                    <td ><a th:href="@{/index/update-ui(id=${list.id})}">修改</a>&nbsp;&nbsp;&nbsp;<a th:href="@{/index/delete(id=${list.id})}">删除</a></td>

                </tr>

                </tbody>
            </table>
            <span>当前第<i th:text="${pageInfo.getPageNum()}"></i>页 共<i th:text="${pageInfo.getPages()}"></i>页
                (共<i th:text="${pageInfo.getTotal()}"></i>条)</span>
            <ul class="pagination" style="float: right">
                <li>
                    <a href="javascript:;" th:onclick="page(1)">首页</a>
                </li>
                <li>
                    <a href="javascript:;" th:onclick="page([[${pageInfo.pageNum-1}]])">上一页</a>
                </li>
                <li>
                    <a href="javascript:;" th:onclick="page([[${pageInfo.pageNum+1}]])">下一页</a>
                </li>
                <li>
                    <a href="javascript:;" th:onclick="page([[${pageInfo.pages}]])">尾页</a>
                </li>

            </ul>

        </div>
    </div>
</div>

<script>
    function page(page) {
        location.href="/index/list?page="+page;
    }

    function sendname() {
        var name =$("#selectname").val()
        console.log(name);

        location.href="/index/list?name="+name;
        $("#backecho").val(name);
    }
    
    function addbook() {
        location.href="/index/add-ui"
    }
</script>

</body>
</html>